import React from "react"
import {Menu,Layout} from 'antd'
import commonConfig from 'static/js/commonConfig'
import {
  UserOutlined
} from '@ant-design/icons';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux'
import { addHistoryRouter } from 'redux/action'
const {Sider} = Layout
class SiderItem extends React.Component {

  // 刷新页面等获得当前的导航栏
 componentDidMount(){
   const herf = window.location.href.indexOf('?')===-1?'':window.location.href.slice(window.location.href.indexOf('?'))
  if(this.props.tabList.length===0) {
    const data = this.props.location.pathname.split('/').filter(i=>i)
    if(data[2]){
      const dataTab = this.props.menus.filter(i=>i.url===data[1])[0]
      const dataItem = this.props.menus.filter(i=>i.url===data[1])[0].children.filter(i=>i.url===data[2])[0]
      this.props.addRouter({
        menuName:dataItem.menuName,url:dataTab.url + '/' + dataItem.url + herf
      })
    } else {
      this.props.addRouter(this.props.menus.filter(i=>i.url===data[1])[0])
    }
  }
 }

 
  
// 点击侧边栏跳转对应页面
 getPageUrl=({keyPath})=>{
  keyPath.reverse()
  if(keyPath[1]) {
    commonConfig.redirectPage(this.props ,keyPath[0]+'/'+ keyPath[1])
    const data = this.props.menus.filter(i=>i.url===keyPath[0])[0]
    const dataItem = this.props.menus.filter(i=>i.url===keyPath[0])[0].children.filter(i=>i.url===keyPath[1])[0]
    this.props.addRouter({
      menuName:dataItem.menuName,url:data.url + '/' + dataItem.url
    })
  } else {
    commonConfig.redirectPage(this.props , keyPath[0])
    this.props.addRouter(this.props.menus.filter(i=>i.url===keyPath[0])[0])
  }

}


// 2.左侧导航栏渲染并配置路由
   getItem = (label, key, icon, children, type) =>{
    return {
      key,
      icon:'',
      children,
      label,
      type,
    };
  }
   items = this.props.menus.map(i=>{
    return !i.children||i.url==='userList'? this.getItem(i.menuName, i.url, <UserOutlined />):this.getItem(i.menuName, i.url, <UserOutlined />,i.children.map(x=>{
      return !x.hide&&this.getItem(x.menuName, x.url)
    }))
  }) 


  state = {
    openKeys:['word']
  }

  onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => this.state.openKeys.indexOf(key) === -1);

    if (this.props.menus.map(i=>i.url).indexOf(latestOpenKey) === -1) {
      this.setState({
        openKeys:keys
      })
    } else {
      this.setState({
        openKeys:latestOpenKey? [latestOpenKey] : []
      })
    }
  };

  render(){
    // 获得高亮的侧边栏
    let keys = this.props.location.pathname.split('/').filter(i=>i)[this.props.location.pathname.split('/').filter(i=>i).length-1]
    // 判断是否详情页面
    if(keys.indexOf('Info')!==-1){
      keys = keys.slice(0,keys.indexOf('Info'))
    } else {
      this.props.menus.forEach(i=>{
        i.children&&i.children.forEach(x=>{
          if(x.url===keys&&x.hide){
             keys = i.url
          }
        })
      })
    }
    // 是否伸缩
    const {collapsed} = this.props
  return   <Sider trigger={null} collapsibled='true' collapsed={collapsed}>
    <div className="logo">
     运营后台
    </div>
    <Menu   onOpenChange={this.onOpenChange} openKeys={this.state.openKeys} selectedKeys={[keys]}  onClick={this.getPageUrl} items={this.items} theme="dark"   mode="inline" ></Menu>
    </Sider>
  }
}
const mapStateToProps = (state) => {
  return {
    tabList: state.tabList,
    collapsed:state.collapsed,
    menus:state.menus
  }
}
// 映射方法
const mapDispatchToProps = (dispatch) => {
  return {
    addRouter: (route) => dispatch(addHistoryRouter(route))
  }
}


export default connect(mapStateToProps,mapDispatchToProps)(withRouter(SiderItem))